import {Component} from "react";

//受控组件 非受控组件
//受控组件:受state的控制

// class One extends Component{
//    state={
//      time:new Date().toLocaleString()
//    }
//    changeTime=()=>{
//       setInterval(()=>{
//          this.setState({
//             time:new Date().toLocaleString()
//          })
//       },1000)
//    }
//    render(){
//     let {time}=this.state
//      return <div>
//         <h1>{time}</h1> 
//         <button onClick={this.changeTime}>修改time</button>
//      </div>
//    }
// }

//非受控组件:不受state的控制，直接获取DOM元素
class One extends Component{
    changeTime(){
       //console.log(this.refs.a);
       // console.log(this.myh1);
       setInterval(()=>{
         this.myh1.innerHTML=new Date().toLocaleString()
       },1000)
    }
    render(){
        return <div>
            <h1>非受控</h1>
            <h1 ref={(ele)=>{
                this.myh1=ele;
            }}>{new Date().toLocaleString()}</h1>
            <button onClick={this.changeTime.bind(this)}>修改时间</button>
        </div>
    }
}

//导出类组件
export default One;